<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv=Content-Type content="text/html; charset=utf-8">
  <meta http-equiv=X-UA-Compatible content="IE=edge">
  <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
  <meta name=apple-mobile-web-app-capable content=yes>
  <meta name=apple-mobile-web-app-status-bar-style content=black>
  <meta name=format-detection content="telephone=no">
  <meta http-equiv=X-UA-Compatible content="chrome=1">
  <meta name=renderer content=webkit>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>浙江省公共数据报告</title>
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="../public/echarts.css">
  <link href="../public/iconfont.css" rel="stylesheet">
  <link rel="stylesheet" href="../public/element/index.css">
  <link rel="stylesheet" href="../public/mint-style.css">
  <link rel="stylesheet" href="hz.css">
</head>
<body>
  <!-- Swiper -->
    <div id="app" v-cloak>
        <mt-header fixed title="浙有数" style="font-size:18px">
        </mt-header>
        <div class="main">
            <div class="contain">
                <div style="padding:10px 20px;background-color: white;">
                    <p><span style="color:black;font-weight: 600">下午好，</span><span style="color:#249AF2">张斌</span></p>
                    <p style="font-size:12px;margin-top:15px;"><span style="border-radius:10px;border:1px solid #249AF2;color:#249AF2;padding:1px 5px;">公告</span><span class="ellipsis" style="margin-left:5px;width:80%;">5月10日上午，浙江省政府召开“深化”最...</span></p>
                    <p style="font-size:12px;margin-top:15px;"><span style="border-radius:10px;border:1px solid #249AF2;color:#249AF2;padding:1px 5px;">公告</span><span class="ellipsis" style="margin-left:5px;width:80%;">5月10日上午，浙江省政府召开“深化”最...</span></p>
                </div>
                <div style="padding:10px 20px;background-color: white;margin-top:8px;">
                    <span class="title">待办事项</span>
                    <div style="margin-top: 10px;display:flex;border-bottom: 1px solid rgb(230, 230, 230);padding-bottom: 15px;">
                        <span style="width:60%;margin-right:10%;color:black;font-size:15px;" class="ellipsis"><span class="index" style="margin-right:5px;">1</span>"一证通办"人口数据申请</span>
                        <span style="width:30%;font-size:12px;line-height:20px;" class="ellipsis"><span style="margin-right:5px;">张琛</span>2019-03-01</span>
                    </div>
                    <div style="margin-top: 10px;display:flex;border-bottom: 1px solid rgb(230, 230, 230);padding-bottom: 15px;">
                        <span style="width:60%;margin-right:10%;color:black;font-size:15px;" class="ellipsis"><span class="index" style="margin-right:5px;">2</span>"一证通办"人口数据申请</span>
                        <span style="width:30%;font-size:12px;line-height:20px;" class="ellipsis"><span style="margin-right:5px;">张琛</span>2019-03-01</span>
                    </div>
                    <div style="margin-top: 10px;display:flex;border-bottom: 1px solid rgb(230, 230, 230);padding-bottom: 15px;">
                        <span style="width:60%;margin-right:10%;color:black;font-size:15px;" class="ellipsis"><span class="index" style="margin-right:5px;">3</span>"一证通办"人口数据申请</span>
                        <span style="width:30%;font-size:12px;line-height:20px;" class="ellipsis"><span style="margin-right:5px;">张琛</span>2019-03-01</span>
                    </div>
                    <div style="margin-top: 10px;display:flex;border-bottom: 1px solid rgb(230, 230, 230);padding-bottom: 15px;">
                        <span style="width:60%;margin-right:10%;color:black;font-size:15px;" class="ellipsis"><span class="index" style="margin-right:5px;">4</span>"一证通办"人口数据申请</span>
                        <span style="width:30%;font-size:12px;line-height:20px;" class="ellipsis"><span style="margin-right:5px;">张琛</span>2019-03-01</span>
                    </div>
                    <div style="margin-top: 10px;display:flex;border-bottom: 1px solid rgb(230, 230, 230);padding-bottom: 15px;">
                        <span style="width:60%;margin-right:10%;color:black;font-size:15px;" class="ellipsis"><span class="index" style="margin-right:5px;">5</span>"一证通办"人口数据申请</span>
                        <span style="width:30%;font-size:12px;line-height:20px;" class="ellipsis"><span style="margin-right:5px;">张琛</span>2019-03-01</span>
                    </div>
                </div>
                <div style="padding:10px 20px;background-color: white;margin-top:8px;">
                    <span class="title square">互联网+监管数据归集</span>
                    <div id="main1" style="width:100%;height:200px;"></div>
                    <div id="main2" style="width:100%;height:200px;"></div>
                </div>
                <div style="padding:10px 20px;background-color: white;margin-top:8px;">
                    <span class="title square">政务服务建设数据归集</span>
                    <div id="main3" style="width:100%;height:200px;"></div>
                    <div id="main4" style="width:100%;height:200px;"></div>
                </div>
                <div style="padding:10px 20px;background-color: white;margin-top:8px;">
                    <span class="title square">数据共享接口调用</span>
                    <div id="main5" style="margin-top:15px;width:100%;height:300px;"></div>
                </div>
                <div style="padding:10px 20px;background-color: white;margin-top:8px;">
                    <span class="title square">数据质量评分</span>
                    <span style="display: block;margin-left:10px;margin-top:10px;">数据质量评分后10名单位</span>
                    <div style="margin:10px;">
                        <el-table :data="tableData" style="width: 100%">
                                <el-table-column
                                    type="index"
                                    label="排名"
                                    align="center"
                                    show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column
                                    prop="name"
                                    align="center"
                                    label="单位">
                                </el-table-column>
                                <el-table-column
                                    prop="garde"
                                    align="center"
                                    label="评分">
                                </el-table-column>
                            </el-table>
                    </div>
                    <span style="display: block;margin-left:10px;">数据质量评分后10名单位</span>
                    <div style="margin:10px;">
                        <el-table :data="tableData" style="width: 100%">
                            <el-table-column
                                type="index"
                                label="排名"
                                align="center"
                                show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="name"
                                align="center"
                                label="单位">
                            </el-table-column>
                            <el-table-column
                                prop="garde"
                                align="center"
                                label="评分">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div style="padding:10px 20px;background-color: white;margin-top:8px;">
                    <span class="title square">数据整改情况</span>
                    <div style="margin:10px;">
                        <el-table :data="tableData1" style="width: 100%">
                            <el-table-column
                                prop="name"
                                label="问题部门"
                                align="center"
                                show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="type"
                                align="center"
                                label="问题类型"
                                show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="count"
                                align="center"
                                label="问题数量">
                            </el-table-column>
                            <el-table-column
                                prop="do"
                                align="center"
                                label="整改完成情况">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
        <mt-tabbar v-model="selected">
            <mt-tab-item id="tab1">
                <i slot="icon" class="iconfont iconshouye" @click="changeUrl('bigData.html')"></i>
                <span @click="changeUrl('bigData.html')">首页</span>
            </mt-tab-item>
            <mt-tab-item id="tab2" >
                <i slot="icon" class="iconfont icondaiban" @click="changeUrl('bigNeedTo.html')"></i>
                <span @click="changeUrl('bigNeedTo.html')"></span>待办</span>
            </mt-tab-item>
            <mt-tab-item id="tab3">
                <i slot="icon" class="iconfont iconbaobiaozhongxin" @click="changeUrl('bigReport.html')"></i>
                <span @click="changeUrl('bigReport.html')"></span>报表</span>
            </mt-tab-item>
            <mt-tab-item id="tab4">
                <i slot="icon" class="iconfont iconyaoqingdaoshi"></i>
                <span>反馈</span>
            </mt-tab-item>
            <mt-tab-item id="tab5">
                <i slot="icon" class="iconfont iconzixun"></i>
                咨询
            </mt-tab-item>
        </mt-tabbar>
    </div>

  <!-- Swiper JS -->
  <script src="../public/vue.js"></script>
  <script src="../public/echarts.js"></script>
  <script src="../public/element/index.js"></script>
  <script src="../public/mint.js"></script>
  <script src="../public/sass.js"></script>
  <script>
    var app = new Vue({
        el: '#app',
        data: {
            selected:'tab1',
            tableData: [{
                name: '市场监管局',
                garde: '20'
            }, {
                name: '自然资源厅',
                garde: '20'
            }, {
                name: '商务厅',
                garde: '20'
            }, {
                name: '统计局',
                garde: '20'
            },{
                name: '国资委',
                garde: '20'
            },{
                name: '财政厅',
                garde: '20'
            }, {
                name: '环保局',
                garde: '20'
            }, {
                name: '发改委',
                garde: '20'
            }, {
                name: '农业厅',
                garde: '20'
            },{
                name: '海洋局',
                garde: '20'
            }],
            tableData1:[{
                name: '市场监管局',
                type:'数据不全',
                count: '20',
                do:'40%'
            }, {
                name: '自然资源厅',
                type:'数据未按时推送',
                count: '20',
                do:'40%'
            }, {
                name: '商务厅',
                type:'数据不全',
                count: '20',
                do:'40%'
            }, {
                name: '统计局',
                type:'数据不全',
                count: '20',
                do:'40%'
            },{
                name: '国资委',
                type:'数据未按时推送',
                count: '20',
                do:'40%'
            }]
        },
        methods: {
            changeUrl(url){
                window.location.href = url
            }
        },
        computed: {
            
        },
        filters: {
            
        },
        mounted: function () {
            var option1 = {
                color:['#F29211','#00758F'],
                grid: {
                    top:'5%',
                    bottom: '5%',
                    left:80,
                    //containLabel: true
                },
                xAxis:  {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                    // axisLabel: {
                    //     rotate: 10,
                    // },
                    data: ['省政法委','省司法厅','省民政厅','省经信厅',
                    '省发展改革委','省信访局','省委编办','省公安厅']
                },
                series: [
                    {
                        type: 'bar',
                        stack: '总量',
                        barWidth:10,
                        label: {
                            normal: {
                                show: true,
                                position: 'insideRight'
                            }
                        },
                        data: [190,190,190,690,690,290,690,550]
                    },
                    {
                        type: 'bar',
                        stack: '总量',
                        barWidth:10,
                        data: [610,610,610,110,110,510,110,250]
                    }
                ]
            }
            var myChart1 = echarts.init(document.getElementById('main1'));
            myChart1.setOption(option1);
            var option2 = {
                color:['#f57c00','#8bc34a'],
                tooltip : {
                    trigger: 'item',
                    formatter: "{b} : {d}%"
                },
                series : [
                    {   
                        label: {
                            formatter: "{b} : {d}%"
                        },
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '50%'],
                        data:[
                            {value:20, name:'已完成'},
                            {value:80, name:'未完成'},
                        ],
                        itemStyle: {
                            
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            var myChart2 = echarts.init(document.getElementById('main2'));
            myChart2.setOption(option2);
            var option3 = {
                color:['#EE7785','#3F70AA'],
                grid: {
                    top:'5%',
                    bottom: '5%',
                    left:80,
                   // containLabel: true
                },
                xAxis:  {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                    // axisLabel: {
                    //     rotate: 10,
                    // },
                    data: ['省政法委','省司法厅','省民政厅','省经信厅',
                    '省发展改革委','省信访局','省委编办','省公安厅']
                },
                series: [
                    {
                        type: 'bar',
                        stack: '总量',
                        barWidth:10,
                        label: {
                            normal: {
                                show: true,
                                position: 'insideRight'
                            }
                        },
                        data: [190,190,190,690,690,290,690,550]
                    },
                    {
                        type: 'bar',
                        stack: '总量',
                        barWidth:10,
                        data: [610,610,610,110,110,510,110,250]
                    }
                ]
            }
            var myChart3 = echarts.init(document.getElementById('main3'));
            myChart3.setOption(option3);
            var option4 = {
                color:['#EE7785','#3F70AA'],
                tooltip : {
                    trigger: 'item',
                    formatter: "{b} : {d}%"
                },
                series : [
                    {   
                        label: {
                            formatter: "{b} : {d}%"
                        },
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '50%'],
                        data:[
                            {value:20, name:'已完成'},
                            {value:80, name:'未完成'},
                        ],
                        itemStyle: {
                            
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            var myChart4 = echarts.init(document.getElementById('main4'));
            myChart4.setOption(option4);
            var option5 = {
                title: {
                    text: '共享平台对接系统数量（累计）',
                    x: 'center'
                },
                grid: {
                    bottom: 20,
                    left:55,
                    // containLabel: true
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: 'rgba(48, 141, 213, .8)',
                    },
                    lineStyle: {
                        color: '#7daef5'
                    }
                    },
                    formatter: '数量 : {c}<br/> 月份 : {b}'
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月',
                    '10月','11月','12月'],
                    axisLine:{
                        lineStyle:{
                            color: '#17829A',
                            width: 2
                        },
                    },
                    axisTick:{
                        show: false
                    },
                    axisLabel:{
                        color: '#333',
                    },

                    boundaryGap: false,
                    // boundaryGap: ['10%', '10%']
                },
                yAxis: {
                    type: 'value',
                    axisLine:{
                        lineStyle:{
                            color: '#17829A',
                            width: 2
                        }
                    },
                    axisTick:{
                        show: false
                    },
                    axisLabel:{
                        color: '#333',
                    },
                    min:'22400',
                    max:'24200'
                },
                series: [{
                    data: [23300, 23600, 23350, 23500, 23360, 24050, 23300,23030,
                    23350,23810,23460,24010],
                    type: 'line',
                    smooth: true,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                            offset: 0, color: '#17829A' // 0% 处的颜色
                            }, {
                            offset: 1, color: '#fff' // 100% 处的颜色
                            }],
                        }
                    },
                    lineStyle:{
                        color: '#17829A',
                        width:2
                    },

                    symbolSize: 2,
                    itemStyle:{
                        color: '#17829A',
                        borderColor: '#1971ee',
                        borderWidth: 4,
                    }
                }]
            };

            var myChart5 = echarts.init(document.getElementById('main5'));
            myChart5.setOption(option5);
        }
    })
      
  </script>

</body>

</html>
